<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ESP32 控制中心</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            color: #333;
        }

        .btn,
        .file-input-wrapper,
        .submit-btn {
            display: block;
            width: calc(100% - 30px);
            padding: 15px;
            margin: 10px 0;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
        }

        .btn {
            background-color: #007bff;
            color: white;
        }

        .file-input-wrapper {
            background-color: #007bff;
            color: white;
            position: relative;
            cursor: pointer;
        }

        .file-input-wrapper:hover,
        .btn:hover,
        .submit-btn:hover {
            background-color: #0056b3;
        }

        .submit-btn {
            background-color: #28a745;
            color: white;
        }

        .btn-dark {
            background-color: #555;
        }

        .btn-danger {
            background-color: #dc3545;
        }

        .dark-mode {
            background-color: #333;
            color: white;
        }

        .dark-mode .btn,
        .dark-mode .file-input-wrapper,
        .dark-mode .submit-btn {
            background-color: #555;
        }

        .dark-mode .btn-dark {
            background-color: #007bff;
        }

        .dark-mode .btn:hover,
        .dark-mode .file-input-wrapper:hover,
        .dark-mode .submit-btn:hover {
            background-color: #333;
        }

        input[type="file"] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
        }

        /* 进度条和进度百分比样式 */
        .progress-container {
            margin-top: 20px;
            display: none;
            width: calc(100% - 30px);
        }

        .progress-container label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        progress {
            width: 100%;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            -webkit-appearance: none;
            appearance: none;
        }

        progress::-webkit-progress-bar {
            background-color: #f3f3f3;
            border-radius: 5px;
        }

        progress::-webkit-progress-value {
            background-color: #007bff;
            border-radius: 5px;
        }

        progress::-moz-progress-bar {
            background-color: #007bff;
        }

        #uploadPercentage,
        #otaPercentage {
            margin-top: 5px;
            display: block;
            width: 100%;
            text-align: center;
            color: black;
            font-weight: bold;
        }

        /* 文件名显示样式 */
        #selectedFileName {
            margin-top: 5px;
            display: none;
            /* 默认隐藏 */
            width: 100%;
            text-align: center;
            color: black;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>ESP32 控制中心</h1>
        <button class="btn" onclick="toggleLED()">切换 LED</button>
        <button class="btn btn-dark" onclick="switchMode()">切换模式</button>
        <!-- File selection and display section -->
        <label class="file-input-wrapper">
            选择文件
            <input type="file" id="file-input" name="update" accept=".bin" onchange="displaySelectedFile()">
        </label>
        <div id="selectedFileName"></div>

        <!-- Upload and OTA progress sections -->
        <button class="btn submit-btn" onclick="updateFirmware()">OTA 更新</button>
        <div class="progress-container" id="uploadProgressSection">
            <label>上传进度：</label>
            <progress id="uploadProgress" value="0" max="100"></progress>
            <span id="uploadPercentage">0%</span>
        </div>
        <div class="progress-container" id="otaProgressSection">
            <label>OTA更新进度：</label>
            <progress id="otaProgress" value="0" max="100"></progress>
            <span id="otaPercentage">0%</span>
        </div>
    </div>

    <script>
        function toggleLED() {
            console.log("切换LED");
        }

        function switchMode() {
            document.body.classList.toggle('dark-mode');
        }

        function displaySelectedFile() {
            var fileInput = document.getElementById('file-input');
            var fileNameDisplay = document.getElementById('selectedFileName');
            if (fileInput.files.length > 0) {
                fileNameDisplay.innerText = fileInput.files[0].name;
                fileNameDisplay.style.display = 'block'; // 显示文件名
            } else {
                fileNameDisplay.innerText = '';
                fileNameDisplay.style.display = 'none'; // 隐藏文件名
            }
        }

        function updateFirmware() {
            var fileInput = document.getElementById('file-input');
            if (fileInput.files.length > 0) {
                var formData = new FormData();
                formData.append('update', fileInput.files[0]);

                // Show the upload progress section
                var uploadProgressSection = document.getElementById('uploadProgressSection');
                uploadProgressSection.style.display = 'block';

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/update-firmware', true);

                // Upload progress event
                xhr.upload.onprogress = function (event) {
                    if (event.lengthComputable) {
                        var percentComplete = (event.loaded / event.total) * 100;
                        var uploadProgress = document.getElementById('uploadProgress');
                        var uploadPercentage = document.getElementById('uploadPercentage');
                        uploadProgress.value = percentComplete;
                        uploadPercentage.innerText = Math.round(percentComplete) + '%';
                    }
                };

                xhr.onload = function () {
                    if (xhr.status == 200) {
                        console.log("上传成功");
                        alert("固件上传成功！");
                        monitorProgress(); // Call the monitor progress function
                    } else {
                        console.log("上传失败");
                        alert("固件上传失败，请重试。");
                    }
                    uploadProgressSection.style.display = 'none'; // Hide upload progress section
                };

                xhr.onerror = function () {
                    console.log("上传出错");
                    alert("上传出错，请检查您的网络连接并重试。");
                    uploadProgressSection.style.display = 'none'; // Hide upload progress section
                };

                xhr.send(formData);
            } else {
                alert("请选择一个文件。");
            }
        }

        监控进度的函数
        function monitorProgress() {
            var interval = setInterval(() => {
                fetch('/progress')
                    .then(response => response.json())
                    .then(data => {
                        var progress = data.progress;
                        var otaProgress = document.getElementById('otaProgress');
                        var otaPercentage = document.getElementById('otaPercentage');

                        otaProgress.value = progress;
                        otaPercentage.innerText = progress + '%';

                        if (progress >= 100) {
                            clearInterval(interval);
                            setTimeout(() => {
                                document.getElementById('otaProgressSection').style.display = 'none';
                            }, 1000); // 进度达到100%后稍等一会儿再隐藏进度条
                        }
                    })
                    .catch(error => {
                        console.error('获取进度失败', error);
                        clearInterval(interval);
                    });
            }, 1000); // 每秒请求一次进度
        }
    </script>
</body>

</html>